<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item style="font-weight: bolder;">类目管理</el-breadcrumb-item>
      <el-breadcrumb-item>类目列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card style="margin-top:20px ;">
      <el-button type="warning" icon="el-icon-zoom-in" size="medium" style="width: 120px;height: 10%; font-size: 16px;margin: 10px 0 20px 0;font-size: 18px;"
        @click="showAdd()" :disabled="isTrue">添加</el-button>
      <!-- 列表 -->
      <el-table :data="tableData">
        <el-table-column label="#" type="index">
        </el-table-column>
        <el-table-column prop="leimu" label="类目" >
        </el-table-column>
        <el-table-column prop="id" label="类目ID" >
        </el-table-column>
        <el-table-column prop="createdAt" label="时间" >
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <!-- 修改按钮 -->
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)" :disabled="isTrue">修改</el-button>
            <!-- 删除按钮 -->
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row.id)" :disabled="isTrue">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="block" style="margin-top: 10px;">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum"
          :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper"
          :total="total"></el-pagination>
      </div>

      <!-- 修改类目对话框 -->
      <el-dialog title="类目修改" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="当前类目">
            <el-tag type="success">{{ruleForm.leimu}}</el-tag>
          </el-form-item>
          <el-form-item label="类目" prop="leimu">
            <el-input v-model="ruleForm.leimu_after" clearable></el-input>
          </el-form-item>
        </el-form>
        <!-- 底部区 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editUserInfo()">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 添加类目对话框 -->
      <el-dialog title="类目添加" :visible.sync="limitVisible" width="50%" @close="limitDialogClosed">
        <el-form :model="AddForm" :rules="AddRules" ref="AddForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="类目" prop="leimu">
            <el-input v-model="AddForm.leimu" clearable></el-input>
          </el-form-item>
        </el-form>
        <!-- 底部区 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="limitVisible = false">取 消</el-button>
          <el-button type="primary" @click="limitEdit()">确 定</el-button>
        </span>
      </el-dialog>

    </el-card>
  </div>
</template>


<style lang="scss" scoped>
</style>

<script>
  import jwtDecode from 'jwt-decode'
  export default {
    data() {
      return {
        isTrue: false,
        // 添加类目的验证规则
        AddRules: {
          // 验证类目名
          leimu: [{
              required: true,
              message: '请输入类目',
              trigger: 'blur'
            },
            {
              min: 1,
              max: 6,
              message: '类目名最少1个字符，最多6个字符',
              trigger: 'blur'
            }
          ]
        },
        // 控制分配权限对话框
        limitVisible: false,
        // 添加类目对话框的表单数据
        AddForm: {
          leimu: ''
        },
        // 获取类目列表的参数
        queryInfo: {
          // 关键字
          query: '',
          // 当前的页数
          pagenum: 1,
          // 当前每页显示多少条数据
          pagesize: 5
        },
        total: 0,
        // 修改类目对话框的表单数据
        ruleForm: {
          leimu_after: '',
          leimu: ''
        },
        // 控制修改对话框
        editDialogVisible: false,
        // 列表数据
        tableData: [],
        // 账号修改的验证规则
        rules: {
          // 验证类目是否合法
          leimu_after: [{
              required: true,
              message: '请输入类目',
              trigger: 'blur'
            },
            {
              min: 1,
              max: 6,
              message: '类目名最少1个字符，最多6个字符',
              trigger: 'blur'
            }
          ]
        }
      }
    },
    created() {
      this.getLeimuList()
      const tokenStr = window.sessionStorage.getItem('token')
      const decode = jwtDecode(tokenStr)
      if (decode.scope !== '超级管理员') {
        this.isTrue = true
      }
    },
    methods: {
      // 获取类目列表数据
      async getLeimuList() {
        const u = await this.$http.get('/ordering/leimu', {
          params: this.queryInfo
        })
        if (u.status !== 200) {
          return this.$message.error('获取类目列表失败！')
        }
        this.tableData = u.data.leimuList
        this.total = u.data.total
      },
      // 监听改变每页显示多少条数据
      handleSizeChange(newSize) {
        this.queryInfo.pagesize = newSize
        this.getLeimuList()
      },
      // 监听改变当前页码
      handleCurrentChange(newPage) {
        this.queryInfo.pagenum = newPage
        this.getLeimuList()
      },
      // 根据id删除对应的用户信息
      async removeUserById(id) {
        // 弹框提示用户是否删除
        const confirmResult = await this.$confirm(
          '此操作将永久删除该管理员, 是否继续?',
          '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).catch(err => err)
        // 如果用户确定了  返回confirm     如果用户取消了 返回cancel
        if (confirmResult !== 'confirm') {
          return this.$message.info('已取消删除！')
        }
        const u = await this.$http.delete(`ordering/leimu/${id}`)
        if (u.status !== 200) {
          this.$message.error('删除类目失败！')
        }
        this.getLeimuList()
        this.$message.success('删除类目成功！')
      },

      // 添加类目信息
      limitEdit() {
        this.$refs.AddForm.validate(async valid => {
          if (!valid) return
          const u = await this.$http.post('/ordering/leimu/add', {
            leimu: this.AddForm.leimu
          })
          if (u.status !== 200) {
            return this.$message.error('添加类目失败！')
          }
          if (u.data.error_code === 10000) {
            return this.$message.error(u.data.msg[0])
          } else {
            // 隐藏添加类目的对话框
            this.limitVisible = false
            // 重新获取类目列表数据
            this.getLeimuList()
            this.$message.success('添加类目成功！')
          }
        })
      },

      // 展示添加类目的对话框
      showAdd() {
        this.limitVisible = true
      },
      // 监听分配权限对话框的关闭事件
      limitDialogClosed() {
        this.$refs.AddForm.resetFields()
      },
      // 修改类目信息
      editUserInfo() {
        this.$refs.ruleForm.validate(async valid => {
          if (!valid) return
          // 可以发起修改的网络请求
          const u = await this.$http.put(`/ordering/leimu/edit/${this.ruleForm.id}`, {
            leimu_after: this.ruleForm.leimu_after
          })
          if (u.status !== 200) {
            return this.$message.error('修改类目信息失败！')
          }
          if (u.data.error_code === 10000) {
            return this.$message.error(u.data.msg[0])
          }
          // 重新获取用户列表数据
          this.getLeimuList()
          this.$message.success('修改类目信息成功！')
          // 隐藏添加用户的对话框
          this.editDialogVisible = false
        })
      },
      // 展示修改的对话框
      async showEditDialog(id) {
        const u = await this.$http.get('/ordering/leimu/' + id)
        if (u.status !== 200) {
          return this.$message.error('获取类目信息失败！')
        }
        this.ruleForm = u.data
        this.editDialogVisible = true
      },
      // 监听修改对话框的关闭事件
      editDialogClosed() {
        this.$refs.ruleForm.resetFields()
      }
    },
    watch: {
      editDialogVisible: function(val, oldVla) {
        if (this.$refs.ruleForm !== undefined) {
          this.$refs.ruleForm.resetFields();
        }
      }
    }
  }
</script>
